<template>
  <div
    class="box-border relative flex w-full h-full text-lg select-none setting"
    v-loading="isPredictLoading"
    :element-loading-text="loadingText"
    element-loading-background="rgba(0, 0, 0, 0.7)"
  >
    <template v-if="!isShowAllLine">
      <SingleLine
        v-model:isPredictLoading="isPredictLoading"
        v-model:predictPipeline="predictPipeline"
        :oilList="oilList"
        :pipelineList="pipelineList"
        :operationModeList="operationModeList"
        :operationConditions="operationConditions_single"
      />
    </template>
    <template v-else>
      <AllLine
        v-model:isPredictLoading="isPredictLoading"
        v-model:predictPipeline="predictPipeline"
        :oilList="oilList"
        :pipelineList="pipelineList"
        :operationModeList="operationModeList"
        :operationConditions="operationConditions_all"
      />
    </template>
  </div>
</template>

<script setup>
import { getOilList } from '@/api/oil'
import AllLine from './allLine_conditions/index.vue'
import SingleLine from './single_conditions/index.vue'
import { onMounted, watch } from 'vue'
// import { snapdom } from '@zumer/snapdom'

// 是否开启loading状态，等待预测请求返回
const isPredictLoading = ref(false)
const loadingText = '正在进行预测计算...'

// 是否展示全线预测工况设置
const isShowAllLine = ref(false)

// 当前预测管道
const predictPipeline = ref('')
watch(predictPipeline, (val) => {
  if (val === '全线') {
    isShowAllLine.value = true
  } else {
    isShowAllLine.value = false
  }
})

// 预测管道列表
const pipelineList = ref([
  { id: 1, value: '乌百线（乌尔禾站-百克站）' },
  { id: 2, value: '百克线（百克站-701站）' },
  { id: 3, value: '调油一线（701站-总站）' },
  { id: 4, value: '新81#线（81#站-701）' },
  { id: 5, value: '全线' },
  { id: 6, value: '北十六线' },
  { id: 7, value: '风克线' }
])

// 运行模式列表
const allOperationModes = [
  { id: 1, value: '单油品连续输送' },
  { id: 2, value: '顺序输送' },
  { id: 3, value: '掺混输送' },
  { id: 4, value: '间歇输送' },
  { id: 5, value: '密闭输送' },
  { id: 6, value: '旁接罐输送' },
  { id: 7, value: '单双管输送' }
]

// 管道与运行模式映射
const pipelineOperationModeMap = {
  '乌百线（乌尔禾站-百克站）': [1, 4],
  '百克线（百克站-701站）': [2, 3],
  '调油一线（701站-总站）': [2],
  '新81#线（81#站-701）': [1],
  北十六线: [1],
  风克线: [1]
}

// 根据预测管道获取运行模式列表（不同管道运行模式不同）
const operationModeList = computed(() => {
  const ids = pipelineOperationModeMap[predictPipeline.value] || []
  return allOperationModes.map((item) => ({
    ...item,
    disabled: !ids.includes(item.id)
  }))
})

// 所有工况
const operationConditions_single = ref([
  {
    value: '正常工况',
    label: '正常工况',
    children: [
      {
        value: 'PID控制下的稳态输送',
        label: 'PID控制下的稳态输送'
      },
      {
        value: '加减阻剂输送',
        label: '加减阻剂输送'
      },
      {
        value: '输量与油温调节',
        label: '输量与油温调节'
      },
      {
        value: '水力越站',
        label: '水力越站',
        disabled: true
      },
      {
        value: '正反输工况',
        label: '正反输工况',
        disabled: true // 禁用
      },
      {
        value: '清管器运行',
        label: '清管器运行'
      }
    ]
  },
  {
    value: '异常工况',
    label: '异常工况',
    children: [
      {
        value: '管道泄漏',
        label: '管道泄漏'
      },
      {
        value: 'ESD阀门异常关断',
        label: 'ESD阀门异常关断'
      },
      {
        value: '泵机组停运',
        label: '泵机组停运'
      }
    ]
  }
])

const operationConditions_all = ref([
  {
    value: '正常工况',
    label: '正常工况',
    children: [
      {
        value: 'PID控制下的稳态输送',
        label: 'PID控制下的稳态输送'
      },
      {
        value: '加减阻剂输送',
        label: '加减阻剂输送'
      },
      {
        value: '输量与油温调节',
        label: '输量与油温调节'
      },
      {
        value: '水力越站',
        label: '水力越站'
      },
      {
        value: '正反输工况',
        label: '正反输工况',
        disabled: true // 禁用
      },
      {
        value: '清管器运行',
        label: '清管器运行'
      }
    ]
  },
  {
    value: '异常工况',
    label: '异常工况',
    children: [
      {
        value: '管道泄漏',
        label: '管道泄漏'
      },
      {
        value: 'ESD阀门异常关断',
        label: 'ESD阀门异常关断'
      },
      {
        value: '泵机组停运',
        label: '泵机组停运'
      }
    ]
  }
])

// 获取油品列表
const oilList = ref([])
const getOilLists = async () => {
  const res = await getOilList()
  oilList.value = res.data
}
getOilLists()

// onMounted(() => {
//   // 截图
//   const makeScreenshot = async () => {
//     const card = document.querySelector('.setting')
//     const capture = await snapdom(card, {
//       scale: 2, // 2倍清晰度
//       backgroundColor: '#fff', // 背景色
//       embedFonts: true, // 内嵌字体
//       compress: true // 压缩优化
//     })
//     const png = await capture.toPng();
//     document.body.appendChild(png)
//     console.log('🐯 ~ makeScreenshot ~ image:', png)
//   }
//   makeScreenshot()
// })
</script>
